<template>
	<div class="eventWraper" v-if="selarticleList.length > 0">
		<div class="rsTitle rsTitleBg flex align_items_c justify_content_sb">
			<div class="rsTitleLeft flex align_items_c justify_content_sb">
				<div>精选快讯</div>
				<div
					class="flex align_items_c pointer rsTitleLeft_more"
					@click="$router.push({ path: '/news' })"
				>
					<div class="rsTitleLeft_point"></div>
					<div class="rsTitleLeft_point"></div>
					<div class="rsTitleLeft_point"></div>
				</div>
			</div>
		</div>
		<div class="MainRight_2 MainRight_3 steps homesteps eventWraper_content">
			<div
				class="description"
				slot="description"
				v-for="(item, index) in selarticleList"
				:key="index"
			>
				<div class="flex align_items_c">
					<span class="stepIcon"></span>
					<div class="stepTime">{{
						this.$utils.convertToLocalTime(item.release_time)
					}}</div>
				</div>
				<router-link
					target="_blank"
					:to="{ name: '/kuaixun_wz', params: { id: item.id } }"
				>
					<div class="stepsText ellipsis_multiple pointer hovercolor">
						{{
							localLanguage == 2
								? item.title
									? item.title
									: item.title
								: item.title
						}}
					</div>
				</router-link>
				<br />
			</div>
		</div>
	</div>
</template>

<script>
import Vue from "vue";
import clipboard from "clipboard";
import { newBus } from "../../components/pc/topHeader2.vue";
export default {
	props: ["selarticleList"],
	data() {
		return {
			currentShow: 0,
			localLanguage: 1,
		};
	},
	mounted() {
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}
		});
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
	},
	methods: {
		changePart(ind) {
			this.currentShow = ind;
		},
	},
};
</script>

<style scoped>
.description {
	margin-top: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.stepIcon {
	width: 5px;
	height: 5px;
	margin-right: 10px;
	border-radius: 50%;
	background: linear-gradient(
		21deg,
		#9945ff -24%,
		#8752f3 -3%,
		#5497d5 15%,
		#43b4ca 25%,
		#28e0b9 36%,
		#19fb9b 60%
	);
}
.stepTime {
	font-size: 12px;
	line-height: 12px;
	color: #b2b2b2;
}
.stepsText {
	margin-top: 5px;
	font-family: PingFang SC;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0em;
	/* 纯白 */
	color: #ffffff;
}
.btn {
	width: 40px;
	height: 25px;
	margin-left: 12px;
	line-height: 25px;
	text-align: center;
	background: #fff;
	border-radius: 13px;
	font-size: 12px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #a0a0a9;
}
.activeBtn {
	color: #0056ff;
}

.homesteps_el {
	margin-top: 30px;
}
.homesteps .el-step__main {
	height: auto;
	margin-left: 10px;
}
.homesteps .stepsVal {
	font-size: 14px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-weight: 600;
	color: #000000;
	margin-top: 5px;

	line-height: 21px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;

	font-size: 14px;
	font-weight: normal;

	/* 黑色主色（字段一级） */
	color: #333333;
}

.btnitem {
	margin-top: 7px;
}

.btnitem img {
	width: 14px;
	margin-right: 3px;
}
.fx div {
	/* font-size: 12px;
	font-family:  "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
	font-weight: 400;
	color: #a0a0a8; */

	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: 13px;
	letter-spacing: 0em;

	color: #b2b2b2;
}
.MainRight_3 {
	padding-top: 0px;
	/* height: 600px; */
}
</style>

<style>
.eventWraper .el-step.is-vertical .el-step__line {
	top: 0px !important;
	/* margin-top: 10px; */
}
.eventWraper .el-step__description {
	margin-top: 0;
	padding-right: 0% !important;
}

.eventWraper .el-step__icon {
	top: -13px;
}

.eventWraper .el-step__main {
	padding-top: 0px;
	margin-top: -8px;
}

.homesteps.eventWraper_content {
	background: transparent !important;
}
</style>
